A styled checkable input that communicates if an option is being added to a group
About Checkbox Button
The ‘add button’ is similar to a checkbox in that it presents a user with a binary choice for an item. However, the only action a user can take is to add (or remove) an entity. When a user clicks the add button, the entity is stored, similar to an ‘add to cart’ experience, until the user saves changes.
The add button is useful for increasing clarity. Since the button only adds or removes entities, the user knows the action they will prompt upon click. The add button also provides a clear visual affordance (in SLDS, we use the ‘+’ icon as an metaphor for ‘add’) and a large target to take this action.
Use the add button if the component you’re building:
- Exists without other multi-select elements (i.e. checkboxes)
- Allows users to select multiple entities
- Semantically fits the add/remove model